<!--
	CSE 403 Cloud Composer Group (https://code.google.com/p/cloud-composer/wiki/CloudComposer)
	Eui Min Jung, Hannah Hemmaplardh, James Vaughan, Jared Clement, Junebae Kye, Jungryul Choi, Michael Lam

	This Main.html is contains the composer website.


-->

<html>
	<head>
		<title>Cloud Composer, CSE 403</title>
		
		
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
		
		<link rel="stylesheet" type="text/css" href="include/Main.css" />
		<link rel="stylesheet" type="text/css" href="include/Grid.css" />
		<link rel="stylesheet" type="text/css" href="include/Instrument.css"/>
		<link rel="stylesheet" type="text/css" href="include/MidiPlayer.css" />
		<link rel="stylesheet" type="text/css" href="include/DisplayBox.css" />
		<link rel="stylesheet" type="text/css" href="include/Tutorial.css" />
		<link rel="stylesheet" type="text/css" href="include/DetectBrowser.css" />
		
		<script src="include/Load.js" type="text/javascript"></script>
        <script src="include/DetectBrowser.js" type="text/javascript"></script>
		<script src="include/Tutorial.js" type="text/javascript"></script>
		
		<script src="include/Note.js" type="text/javascript"></script>
		<script src="include/NoteData.js" type="text/javascript"></script>
		
		<script src="include/Instrument.js" type="text/javascript"></script>
		<script src="include/InstrumentSelector.js" type="text/javascript"></script>
		
		<script src="include/PageView.js" type="text/javascript"></script>
		<script src="include/NoteGrid.js" type="text/javascript"></script>
		
        <script src="include/MidiPlayer.js" type="text/javascript"></script>
        <script src="include/SaveSession.js" type="text/javascript"></script>
        <script src="include/HighlightBar.js" type="text/javascript"></script>
        <script src="include/DisplayBox.js" type="text/javascript"></script>
        <script src="include/Dummy.js" type="text/javascript"></script>
	</head>
	
	<body>
		<div id="header">
			<div id="header_left">
				<h1>Cloud Composer</h1>
			</div>
			
			<div id="header_center">
				Help
			</div>
			
			<div id="header_right">
				<button id="getlinkBtn">Get Link</button>
				<button id="downloadBtn">Download</button>
				
				<div id="tempobar">
					<div id="sliderValue">
						BPM = 80
					</div>
					<div id="tempo">
						<!-- Slider goes here-->
					</div>
				</div>
			</div>
		</div>
		
		<div id="mid">
			<div id="instrumentBar">
			<!-- Instruments bar component goes here-->
			</div>
	
			<div id="container">
				<div id="grid">
					<!-- Grid component goes here-->
				</div>
			
				<div id="midiplayer">
                	<div id="playbackButtons">
						<div id="playback_stop"></div>
						<div id="playback_play"></div>
					</div>

					<div id="playbackSliderContainer">
						<div id="playbackSlider"></div>
					</div>
					
					<!-- Actual Java Midi player is invisible -->
					<applet id="javaApplet" code="CloudComposerGroup/CloudComposer/CloudAppletController.class" width="1" height="1" archive="MidiPlayer.jar"></applet>
				</div>
			</div>
		</div>
		
		<div id="tutorial"></div>
		
		<div id="footer">
			<!-- Contact information goes here-->
			<p>&copy; Cloud Composer</p>
			<p>Visit Cloud Composer Group at our <a href="https://code.google.com/p/cloud-composer/wiki/CloudComposer">Wiki</a></p>
		</div>
		
	</body>
</html>

